<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>让搜索框固定</title>
         </style>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				
			
				
				var searchTop=$("#search").offset().top;
				$(window).scroll(function() {
					
					var scroH = $(this).scrollTop();
					//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定  
					if(scroH >= searchTop) {
						$("#search").css({
							"position": "fixed",
							"top": 0
						});
					} else if(scroH <searchTop) {
						$("#search").css({
							"position": "static"
					
							
						});
					}
					
					
					
					
					
					
					
					
					
				});
			
		
			});
		</script>
	</head>

	<body>
		<body ">
		<div id="head" style="height: 200px;border: 1px solid red; "></div>
		<div id="search" style="background-color: darkgray;width: 90%; ">
			<form>
			taobao:<input type="text " name="product "/><input type="submit " value="搜索 " />
			</form>
		</div>
		<div id="content " style="height: 4000px; "></div>
		
	</body>
</html>